<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>聚衣商城</title>
  <link rel="stylesheet" href="../../lib/css/reset.min.css">
  <link rel="stylesheet" href="../../lib/css/elementui.min.css">
  <link rel="stylesheet" href="../../css/all.min.css">
</head>

<body>
  <div class="app-wrap" v-cloak id="coupon">
    <header-top></header-top>
    <user-top></user-top>
    <div class="bg-gray">
      <div class="container userCenter clear">
        <leftnav  navtext="我的优惠券"></leftnav>
        <div class="balance_content">
          <div class="score">
           优惠券
          </div>
          <div class="balance_detail">
          <ul class="tabs coupon_list">
            <li class="li-tab" v-for="(item,index) in coupon_tabs" @click="toggleTabs(index)" :class="{active:index!=nowIndex}">
              <span>{{item}}</span>
            </li>
          </ul>
            <div class="divTab couponTab" v-show="nowIndex===0">
              <div class="clear" >
                <div class="coupon_item" v-for="item in pageCoupon">
                  <a href="#">
                    <div class="coupon_top">
                      <div class="inner">￥<span>{{item.faceValue}}</span></div>
                      <p>{{item.couponName}}</p>
                      <div class="date">{{item.startTime}} - {{item.endTime}}</div>
                    </div>
                    <div class="coupon_bottom">
                       使用范围：【{{item.name}}】店铺
                    </div>
                  </a>
                </div>
              </div>
            <common-page :current="1" :all="countPage" @btn-click="listen"></common-page>
            </div>
            <div class="divTab couponTab" v-show="nowIndex===1">
             <div class="clear">
                <div class="coupon_item coupon_used" v-for="item in pageCoupon">
                  <a href="#">
                    <div class="coupon_top">
                      <div class="inner">￥<span>{{item.faceValue}}</span></div>
                      <p>{{item.couponName}}</p>
                      <div class="date">{{item.startTime}} - {{item.endTime}}</div>
                    </div>
                    <div class="coupon_bottom">
                      使用范围：【{{item.name}}】店铺
                    </div>
                  </a>
                </div>

              </div>
              <common-page :current="1" :all="countPage" @btn-click="listen"></common-page>
            </div>                                          
            <div class="divTab couponTab" v-show="nowIndex===2">
              <div class="clear">
                <div class="coupon_item coupon_timeOut" v-for="item in pageCoupon">
                  <a href="#">
                    <div class="coupon_top">
                      <div class="inner">￥<span>{{item.faceValue}}</span></div>
                      <p>{{item.couponName}}</p>
                      <div class="date">{{item.startTime}} - {{item.endTime}}</div>
                    </div>
                    <div class="coupon_bottom">
                      使用范围：【{{item.name}}】店铺
                    </div>
                  </a>
                </div>
              </div>
              <common-page :current="1" :all="countPage" @btn-click="listen"></common-page>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../../lib/js/vue.js"></script>
  <script src="../../lib/js/elementui.min.js"></script>
  <script src="../../lib/js/axios.min.js"></script>

  <!-- mock 数据 打包发布的时候记得移除 -->
  <script src="../../lib/js/mock.js"></script>
  <script src="../../js/all.min.js"></script>
  <script>
    coupon();
  </script>
</body>

</html>